<template>
	<view class="context">
		<view class="tip">请输入身份证信息</view>
		<view class="box">
			<view class="box-item">
				<view class="box-item-name">姓名</view>
				<u-input placeholder="请输入姓名" :border="true" :border-color="current1 == true ? '#2A96EE': '#ccc'"
					@focus="changeBgColor(1)" @blur="lostBgColor(1)"></u-input>
			</view>
			<view class="box-item">
				<view class="box-item-name">身份证号</view>
				<u-input placeholder="请输入身份证号码" :border="true" :border-color="current2 == true ? '#2A96EE': '#ccc'"
					@focus="changeBgColor(2)" @blur="lostBgColor(2)"></u-input>
			</view>
			<view class="tip" style="margin: 40rpx auto 10rpx auto;">请按要求上传证件照</view>
			<view class="box-upload">
				<u-upload width="340" upload-text="上传证件照正面">
					<image slot="addBtn" src="/static/upload.png" class="up-img"></image>
				</u-upload>
				<u-upload width="340" upload-text="上传证件照反面">
					<image slot="addBtn" src="/static/upload.png" class="up-img"></image>
				</u-upload>
			</view>
		</view>
		<button class="submit">确认提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current1: false,
				current2: false
			}
		},
		methods: {
			changeBgColor(index) {
				if (index == 1)
					this.current1 = true
				else
					this.current2 = true
			},
			lostBgColor(index) {
				if (index == 1)
					this.current1 = false
				else
					this.current2 = false
			}
		},
		onReady() {},
		onLoad: function(v) {}
	}
</script>

<style lang="scss">
	::v-deep .u-add-tips {
		margin-top: 70rpx !important;
	}

	.context {
		padding: 20rpx;
	}

	.tip {
		font-size: 36rpx;
		margin-bottom: 45rpx;
	}

	.box-upload {
		display: flex;

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.up-img {
			position: absolute;
			z-index: 9999;
			margin: 35rpx 0 0 130rpx;
		}
	}

	.box {
		.box-item {
			.box-item-name {
				margin: 10rpx auto;
			}
		}
	}
	
	.submit{
		width: 702rpx;
		height: 88rpx;
		background: #2A96EE;
		border-radius: 12rpx;
		color: #fff;
		margin: 60rpx auto;
	}
</style>
